<template>
  <div class="home">
    <div>
        <img src="@/assets/images/banner2.png" alt="">
       <house-list :houseList="list"></house-list>
       <Pagination :page="page" @changePage="changePage"></Pagination>
    </div>
  </div>
</template>

<script>
import { defineComponent ,computed, reactive, toRefs,onMounted  } from 'vue';
import HouseList from '@/components/houseList/house.vue'
import Pagination from '@/components/pagination/index.vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Home',
  components: {
    HouseList,Pagination
  },
  setup() {
    const store = useStore() ;
    const isLogin = computed(() => store.state.isLogin)
    const data = reactive({
      page: {
        pageSize: 15,
        total: 100
      },
      form: {
        pageSize: 15,
        page: 1,
        house_title: "",
      },
      list: []
    })
    
    const handlerLogin = (bol,type) => {
      store.commit('handlerLogin',bol,type)
    }
    const changePage = (num) => {
      data.form.page = num
      getList()
      backtop()
    }
    const getList = ()=> {
      store.dispatch("home/houseList", data.form).then((res) => {
        let arr = res.data;
        arr.forEach((item) => {
          item.house_banner = item.house_banner && item.house_banner.split(",");
          item.keywords = item.keywords && item.keywords.split(",");
          item.item_pro = item.item_pro && item.item_pro.split(",");
          item.keywords =
            item.keywords && item.keywords.length && item.keywords.slice(0, 2);
        });
        data.page.total = res.last_page
        data.list = arr;
      });
    }

    const backtop = ()=>{
      document.documentElement.scrollTop = document.body.scrollTop = 0;
      }
    onMounted(() => {
      getList()
    });
    return {
      ...toRefs(data),
      handlerLogin,
      changePage,backtop,
      isLogin
    }
  }
});
</script>
